<template>
  <div> 
    <el-card class="box-card">
      <div slot="header" style="text-align: center;font-weight:bold;font-size:18px;"> 
        <span>{{title}}</span> 
      </div>
      <div class="box-right">
        <div v-show="imgCover" class="overlay" @click="handleClick()"></div>
        <img v-show="imgCover" :src="imgUrl" style="width: 480px; height: 270px"/>
        <div v-show="! imgCover" :id="uuid"> </div>
        <div>
          <a class="Youtube" :href="'https://www.youtube.com/watch?v='+youtubeid">[Youtube]</a>
          <a v-show="showYouku" class="Youku" :href="'https://v.youku.com/v_show/id_'+youkuid">[Youku]</a>
        </div>
      </div>


      <div class="box-left">
        <h2>TIME:   {{create_date}}</h2>
        {{synopsis}}
      </div>
    </el-card>

  </div>
</template>

<script>


export default {
  data: () => ({
    imgCover: true,
    vodPlayerJs: 'https://player.polyv.net/script/player.js',
  }),
  computed: {
    showYouku() {
        return this.youkuid !== "";
    }
  },
  props: {
    title: {type:String,default:""},
    create_date: {type:String,default:""},
    imgUrl: {type:String,default:""},
    synopsis: {type:String,default:""},
    polyvid: {type:String,default:"88083abbf5bcf1356e05d39666be527a_8"},
    youtubeid: {type:String,default:""},
    youkuid: {type:String,default:""},
    uuid: {type:String,default:""},
  },
  methods: {
    handleClick() {
      this.imgCover = false;
      this.loadPlayerScript(this.loadPlayer);
    },
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement('script');
        myScript.setAttribute('src', this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
    loadPlayer() {
      const polyvPlayer = window.polyvPlayer;
      
      this.player = polyvPlayer({
        wrap: '#'+this.uuid,
        width: 480,
        height: 270,
        vid: this.polyvid ,
        autoplay: true,
      }); 
    }
  },
  destroyed() {
    if (this.player) {
        this.player.destroy();
    }
  }

  

}
</script>

<style lang="less" scoped>
/deep/.el-card{ border-radius: 10px;margin: 10px 0px;}
/deep/.el-card__header{ padding: 10px 20px;}

.box-left{
  h2 {text-align: center; font-size:16px;margin-top: -20px;}
  font-size:16px;text-indent:2em; text-align: justify;
  width: 600px;
  font-family: 'source sans pro',arial, sans-serif;
}
.box-right{ float:right; margin-top: 15px; }

.overlay{
  position:absolute;
  transform: translateX(190px) translateY(85px);
  width: 100px; height: 100px;
  opacity: 0.5;
  background: no-repeat url("../../assets/play_circle.png");
  background-size:100px 100px;
  z-index:1;
}
.overlay:hover{opacity: 1;cursor :pointer; }

.Youtube{
  background: left no-repeat  url(""); 
  padding-left: 18px;
  padding-right: 50px;
}

.Youku{
  background: left no-repeat  url(""); 
  padding-left: 18px;
}

</style>
